<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/menubutton/menubutton.js" charset="utf-8"></script>

<div id="menubutton">
  	<div title='API'>
		  <h2>$.fn.ccayMenuButton(ops)</h2>				
		  <h3>作用：通过选择器初始化生成menubutton，多个按钮集合在一个在一个按钮上</h3>	
		  <form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
				    <li class="ccay-form-row">
				        <samp><h3>ops参数</h3></samp>
						<span class="ccay-form-input">
							<h3>描述</h3>
						</span>
					</li>
							
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="defaultText"></samp>							    
						<span class="ccay-form-input">
							{String}
							<p>默认按钮的文字显示，必填
							<p>可直接指定i18nKey，自动国际化
							<p>支持html标签</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="defaultEvent"></samp>							    
						<span class="ccay-form-input">
							{String}/{Function}
							<p>默认菜单按钮的事件， 可选
							<p>无设置时，看是否按钮项是否有设置默认isDefaultMenu：true，
							<p>若设置，则触发该按钮项的事件，否则点击触发下拉</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="defaultItemClass"></samp>							    
						<span class="ccay-form-input">
							{String}
							<p>指定默认按钮项的样式，可选
							<p>默认值：'defautl-item'</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="panelBegin"></samp>							    
						<span class="ccay-form-input">
							{String}
							<p>指定下拉区的开始标签，可选
							<p>默认值：'&lt;ul>'</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="item"></samp>							    
						<span class="ccay-form-input">
							{String}
							<p>指定按钮项的html，可选
							<p>默认值：'&lt;li class="ccay-menubutton-item ${itemCSS}" 
							<p>${attr}>&lt;a class="ccay-icon ${icon}">&lt;/a>&lt;span>${text}&lt;/span>&lt;/li>'</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="panelEnd"></samp>							    
						<span class="ccay-form-input">
							{String}
							<p>指定下拉区的结束标签，可选
							<p>默认值：'&lt;/ul>'</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="css"></samp>							    
						<span class="ccay-form-input">
							{String}
							<p>指定下拉区的css，可选
							<p>默认值：{top : -1,left:5}</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="menus{Array}"></samp>
					    <span class="ccay-form-input">
							 	<table class="ccay-table">
								 	<tr>
								 		<th>icon</th>
								 		<td>
								 		{String}
								 		<p>指定图标的名称，可在“按钮”demo中查看图标类型，可选，默认样式"defalt"
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>id</th>
								 		<td>
								 		{String}
								 		<p>指定按钮id，可选
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>permission</th>
								 		<td>
								 		{String}
								 		<p>绑定按钮权限，可选
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>text</th>
								 		<td>
								 		{String}
								 		<p>指定按钮的显示名称，可指定i18nKey，系统自动国际化，必填
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>click</th>
								 		<td>
								 		{Function}/{String}
								 		<p>指定按钮事件，可选
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>isDefaultMenu</th>
								 		<td>
								 		{Boolean}
								 		<p>是否设置该按钮是默认按钮，可选
										<p>无指定defaultEvent，指定isDefaultMenu，则按钮默认事件为该按钮事件
										<p>若都无指定，则点击一级按钮触发下拉"
								 		</td>
								 	</tr>
								 	<tr>
								 		<th>attr</th>
								 		<td>
								 		{Object}
								 		<p>自定义其他html属性，可选
								 		</td>
								 	</tr>
							 	</table>
					    </span>
						</li>
				    </ul>
			   </div>
		  </form>
		  <h2>$.fn.manager()</h2>				
		  <h3>作用：menubutton对象的manager管理器</h3>	
		  <form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>						
				    <li class="ccay-form-row">
				        <samp><h3>方法</h3></samp>
						<span class="ccay-form-input">
							<h3>描述</h3>
						</span>
					</li>
							
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="getMenuItemList()"></samp>							    
						<span class="ccay-form-input">
							得到菜单列表
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="getMenuItemCount()"></samp>							    
						<span class="ccay-form-input">
							得到菜单项的数目
						</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="addMenuItem(itemOp)"></samp>							    
						<span class="ccay-form-input">
							添加菜单项
							<p>itemOp与menus的   单项  设置一致
							</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="removeMenuItem(id)"></samp>							    
						<span class="ccay-form-input">
							移除菜单项,    参数id:项的id
							</span></li>
					<li class="ccay-form-row">
					    <samp class="i18n" i18nKey="disabled(flag)"></samp>							    
						<span class="ccay-form-input">
							禁用
							<p>flag为true时禁用
							<p>flag为false时启用</span></li>
				    </ul>
			   </div>
		  </form>
		  	    
   	</div>	
	<div title='Demo' tabid="tab2">
		  	<div>
				<h3>1、使用JS方法进行初始化</h3>
				<br>
				<div id="menubtn"></div>
				<br><br>
				<h3>html code:</h3>
				<div class="codeArea">
					<pre id="html1">
&lt;div id="demo" >&lt;/div></pre>
				</div>
				<h3>js code:</h3>
	            <div class="codeArea">
					<pre id="js1">
$("#demo").ccayMenuButton({
	defaultText : "MenuName",
	// <font color="red">默认按钮事件优先级最高，menus项中的isDefaultMenu次之</font>
	// 无指定defaultEvent,无指定isDefaultMenu，默认按钮触发下拉
	defaultEvent :function(){
		Ccay.UI.topBox("defaultEvent");
	}, 
	menus : [ 
	  {
		icon : "export", // 指定系统图片的名称，可在“按钮”demo中查询，也可指定之际的类名，自定义图片样式
		permission:"Service$HtmlArea$import", // 绑定权限，有该全权限时，才添加
		id : "exportBtn1", // 指定按钮id
		text : "ccay.common.button.export", // 指定按钮value，支持国际化
		click : "alert(123);", // 按钮事件
		attr:{name:"haha1",title:"hihi1"} // 扩展属性,不能使用class
	 }, 
	 {
		icon : "import",
		id : "importBtn",
		permission:"",
		text : "ccay.common.button.import",
		click : function() {
			Ccay.UI.topBox("import")
		},
		isDefaultMenu : true,
		attr:{name:"haha2",title:"hihi2"} // 扩展属性
	} ]
});	
					</pre>
				</div>
				<div class='try'>
					<a onclick="Ccay.example.openTry('#menubutton',$('#js1').html(),$('#html1').html())">亲自试一试</a>
				</div>
			</div>
			<div>
				<h3>2、使用HTML方法进行初始化</h3>
				<br>
				<div class="ccay-menubutton init">
					<div class="ccay-menubutton-body" onclick="alert('I am a Button')" id="">
						<a class="ccay-icon add"></a>
						<span class="i18n" i18nKey="ccay.common.button.add"></span>
					</div>
					<a class="ccay-menubutton-btn" href="javascript:void 0"></a>
					<div class="ccay-menubutton-selector">
						<ul>
							<li id="" class="ccay-menubutton-item "
								onclick="alert('I am a Button')"><a class="ccay-icon export"></a><span
								class="i18n" i18nKey="ccay.common.button.export"></span></li>
							<li id="" class="ccay-menubutton-item "
								onclick="alert('I am a Button')"><a class="ccay-icon confirm"></a><span
								class="i18n" i18nKey="ccay.common.button.ok"></span></li>
						</ul>
					</div>
				</div>
				<br><br>
				<h3>html code:</h3>
				<div class="codeArea">
					<pre id="html2">
&lt;div class="ccay-menubutton init">
	&lt;div class="ccay-menubutton-body" onclick="alert('I am a Button')" id="">
		&lt;a class="ccay-icon add">&lt;/a>
		&lt;span class="i18n" i18nKey="ccay.common.button.add">&lt;/span>
	&lt;/div>
	&lt;a class="ccay-menubutton-btn" href="javascript:void 0">&lt;/a>
	&lt;div class="ccay-menubutton-selector">
		&lt;ul>
			&lt;li id="" class="ccay-menubutton-item "
				onclick="alert('I am a Button')">
				&lt;a class="ccay-icon export">&lt;/a>
				&lt;span class="i18n" i18nKey="ccay.common.button.export">&lt;/span>
			&lt;/li>
			&lt;li id="" class="ccay-menubutton-item "
		onclick="alert('I am a Button')">
				&lt;a class="ccay-icon confirm">&lt;/a>
				&lt;span class="i18n" i18nKey="ccay.common.button.ok">&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
&lt;/div>
					</pre>
				</div>
				<div class='try'>
					<a onclick="Ccay.example.openTry('#menubutton','',$('#html2').html())">亲自试一试</a>
				</div>
			</div>
	</div>
	<div title="试一试" tabid="trytab" >
		    <fieldset class='ccay-demo'>
		    <legend ><h2>代码区</h2></legend>
			   
			   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
	
					<div>
					    <table  style="width:100%;">
					      <tr>
					        <td style="width:100%;">
							<h3>js Code:</h3>	
							  <!-- 高度按需来调整。默认最小应为100px -->					
		                      <textarea id="jsTxt" style="height:250px;width:99%;"></textarea>
		                    </td>   
		                  </tr>
		                  <tr>
		                    <td style="width:100%;">
							<h3>html Code:</h3>
							  <!-- 高度按需来调整。默认最小应为100px -->
		                      <textarea id="htmlTxt" style="height:250px;width:99%;"></textarea>
		                    </td>
		                  </tr> 
	                    </table>
					</div>
	           </fieldset>
	        <fieldset class='ccay-demo'>
	          <legend ><h2>结果区</h2></legend>
				<div>
					<div id="demoMainPanel"></div>
				</div>
	        </fieldset>
	</div>
	<div title="FAQ">
	  <form class="init ccay-form">
		<div class="ccay-form-body ccay-form-custom">
		    <ul>                     
		        <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
		        <li class="ccay-form-row">
		                          <samp class="i18n" i18nKey=""></samp>                          
		                         <span class="ccay-form-input"></span>
		        </li>  
		    </ul>
		</div>
	  </form>                    
	</div>  
</div>


